<template>
  <div class="filesbox">
    <div v-if="handleFile(this.fileUrl)" class="pdfStyle">
      <a-icon theme="twoTone" type="file-pdf" :style="{ fontSize: '50px' }" />
    </div>
    <div v-if="!handleFile(this.fileUrl)">
      <img
        class="showimg"
        @click="imgClick"
        :src="'/file/file/download/' + fileUrl"
        :title="fileTitle"
        alt
      />
    </div>

    <a-modal class="modalClass" :visible="visible" @cancel="handleCancel" :footer="null">
      <img class="imgClass" :src="imageSrc" alt />
    </a-modal>
  </div>
</template>

<script>
import AButton from "ant-design-vue/es/button/button";
import ACard from "ant-design-vue/es/card/Card";
import AForm from "ant-design-vue/es/form/Form";
import AFormItem from "ant-design-vue/es/form/FormItem";
import ASelect from "ant-design-vue/es/select/index";
import utils from "../../utils/utils.js";
import ATextarea from "ant-design-vue/es/input/TextArea";
import ACheckboxGroup from "ant-design-vue/es/checkbox/Group";
import APopconfirm from "ant-design-vue/es/popconfirm";
import AInputNumber from "ant-design-vue/es/input-number";
import AInput from "ant-design-vue/es/input/Input";
import AModal from "ant-design-vue/es/modal/Modal";
import AIcon from "ant-design-vue/es/icon/index";

const ASelectOption = ASelect.Option;
export default {
  name: "FilesBox",
  components: {
    AButton,
    ACard,
    AForm,
    AFormItem,
    ASelect,
    APopconfirm,
    AInputNumber,
    ATextarea,
    AInput,
    AModal,
    AIcon
  },
  props: {
    fileUrl: "",
    fileTitle: ""
  },
  //   watch: {
  //     auditingPanel: {
  //       immediate: true, // 这句重要

  //       handler(val) {
  //         console.log("val:{}", val);
  //         if (
  //           val.memberType == "BB" &&
  //           val.status == "rejected" &&
  //           this.auditingAction.status == null
  //         ) {
  //           this.auditingAction.status = val.status;
  //         }
  //         if (val.status == "init") {
  //           this.auditingAction.status = undefined;
  //         }
  //       }
  //     }
  //   },
  // inject: ["reload"],
  data() {
    return {
      visible: false,
      imageSrc: "",
      auditingAction: { status: undefined },
      loading: false,
      username: localStorage.getItem("username"),
      placeholderText: "选择审核项"
    };
  },
  created() {
    // this.handleFile(this.fileUrl);
  },

  methods: {
    handleFile(string) {
      // console.log("string", string);
      if (string) {
        let arr = string.split(".");
        //   console.log("处理的数组arr", arr);
        if (arr[arr.length - 1] === "pdf") {
          return true;
        } else {
          return false;
        }
      }
    },
    cancel: function() {},
    onChange: function(value) {
      console.log(value);
    },
    imgClick(e) {
      this.imageSrc = e.target.currentSrc;
      this.visible = true;
    },
    handleCancel(e) {
      this.visible = false;
    }
  }
};
</script>  
<style scoped lang='less'>
.filesbox {
  display: inline-block;
}
.pdfStyle {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.showimg {
  width: 100%;
  cursor: pointer;
}

.imgClass {
  vertical-align: middle;
  border-style: none;
  width: 100%;
}

.modalClass {
  overflow: hidden;
}
</style>
